<template>
  <div class="map_wrapper">
    <div id="map" class="map" />
  </div>
</template>

<script>
import mapinit from '@/utils/map-init.js'
export default {
  name: 'MyMap',
  props: {
    site: {
      type: Object,
      required: true
    },
    siteLngLats: {
      type: Array,
      required: true
    },
    places: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      zoom: '16',
      T: null,
      map: null,
      polygon: null,
      first: true
    }
  },
  watch: {
    site() {
      this.initMap()
    },
    siteLngLats() {
      setTimeout(() => {
        this.drawSite()
      }, 500)
    },
    places() {
      setTimeout(() => {
        this.drawPlaces()
      }, 500)
    }
  },
  methods: {
    initMap() {
      mapinit.init().then(T => {
        const map = new T.Map('map', {
          minZoom: 4
        })
        map.centerAndZoom(new T.LngLat(this.site.lng - 0.01, this.site.lat + 0.005), this.zoom)
        map.addControl(new T.Control.MapType())
        this.T = T
        this.map = map
      })
    },
    changeCenter() {
      if (this.siteLngLats.length !== 0) {
        const [lng, lat] = this.siteLngLats[0]
        this.map.centerAndZoom(new this.T.LngLat(lng - 0.005, lat + 0.005), this.zoom)
      }
    },
    drawSite() {
      this.changeCenter()
      const points = this.siteLngLats.map(([lng, lat]) => {
        return new this.T.LngLat(lng, lat)
      })
      this.addPolygon(points, 0)
    },
    drawPlaces() {
      this.places.map(item => {
        let lng_t = 0
        let lat_t = 0
        const lngLats = item.lngLats
        const length = lngLats.length
        const points = lngLats.map(([lng, lat]) => {
          lng_t += Number.parseFloat(lng)
          lat_t += Number.parseFloat(lat)
          return new this.T.LngLat(lng, lat)
        })
        this.addMarker(lng_t / length, lat_t / length, item)
        this.addPolygon(points, 0.5, item)
      })
    },
    addPolygon(points, fillOpacity, item) {
      const polygon = new this.T.Polygon(points, {
        color: '#409EFF',
        weight: 3,
        opacity: 1,
        fillColor: '#409EFF',
        fillOpacity
      })
      if (item !== undefined) {
        polygon.addEventListener('click', event => {
          this.$emit('open-drawer', item)
        })
      }
      this.map.addOverLay(polygon)
    },
    addMarker(lng, lat, item) {
      const T = this.T
      const map = this.map
      const marker = new T.Marker(new T.LngLat(lng, lat))
      marker.addEventListener('mouseover', event => {
        event.target.openInfoWindow(new T.InfoWindow(`${item.placeName}`, { closeButton: false }))
      })
      marker.addEventListener('mouseout', event => {
        event.target.closeInfoWindow()
      })
      marker.addEventListener('click', event => {
        this.$emit('open-drawer', item)
      })
      map.addOverLay(marker)
    },
    centerPoint(points) {
      let lng = 0
      let lat = 0
      const length = points.length
      for (let i = 0; i < points.length; i++) {
        lng += points[i][0]
        lat += points[i][1]
      }
      return [lng / length, lat / length]
    }
  }
}
</script>

<style scoped>
.map_wrapper {
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}

.map {
  width: 100%;
  height: 100vh;
}

.map >>> .tdt-control-copyright {
  display: none;
}

</style>
